<!-- 搜索组件 -->
<template>
	<view class="search-box" :style="{ width: '750rpx', backgroundColor: searchBackgroundColor }">
		<u-search
			class="search"
			:placeholder="placeholder"
			:bg-color="inputBackgroundColor"
			:color="inputTextColor"
			:focus="focus"
			shape="square"
			v-model="keyword"
			:show-action="false"
			@change="searchChange"
			@clear="searchClear"
			:input-align="inputAlign"
		></u-search>
	</view>
</template>

<script>
export default {
	name: 'search',
	props: {
		placeholder: {
			type: String,
			default: '搜索'
		},
		// 组件背景颜色
		searchBackgroundColor: {
			type: String,
			default: '#FFFFFF'
		},
		// 输入框背景颜色
		inputBackgroundColor: {
			type: String,
			default: '#f2f2f2'
		},
		// 输入框字体颜色
		inputTextColor: {
			type: String,
			default: '#999999'
		},
		// 是否自动获得焦点
		focus: {
			type: Boolean,
			default: false
		},
		// 输入框内容水平对齐方式
		inputAlign: {
			type: String,
			default: 'center'
		}
	},
	data() {
		return {
			keyword: '',
			isInput: false // 节流阀，false 为默认关闭节流阀的状态
		};
	},
	methods: {
		// 搜索框内容发生变化时触发
		searchChange() {
			// 判断节流阀的状态,为 true 则 return 出去
			if (this.isInput) return;
			this.isInput = true;
			setTimeout(() => {
				// console.log(this.keyword);
				this.$emit('change', this.keyword);
				this.isInput = false;
			}, 1000);
		},
		// 搜索框配置了clearabled 后，清空内容时会发出此事件
		searchClear() {
			this.$emit('clear');
		}
	}
};
</script>

<style lang="scss" scoped>
.search-box {
	height: 109rpx;
	padding: 16rpx 24rpx;
	display: flex;
	align-items: center;
	.search {
		width: 100%;
		
	}
}
</style>
